<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="m/head :: head"></div>

    <title>找回密码</title>
</head>
<body>
<div class="loginwrap">
    <div class="login-title">
        <a href="javascript: window.history.back(-1)">取消</a>
    </div>
    <div class="login-con retrieve-password">
        <div class="top">
            <dl>
                <dt style="background: #ff5a34;"></dt>
                <dd style="color: #ff5a34;">验证手机号</dd>
            </dl>
            <dl>
                <dt style="background: #ff5a34;"></dt>
                <dd style="color: #ff5a34;">重置登录密码</dd>
            </dl>
            <dl>
                <dt></dt>
                <dd>修改成功</dd>
            </dl>
        </div>
        <div class="login-input">
            <form name="modifyForm" th:action="@{/retrieve/2}" method="post">
                <div class="login-text clearfix">
                    <div class="left">
                        新密码
                    </div>
                    <div class="right">
                        <input type="password" name="password" placeholder="6-16位字母、数字、下划线"/>
                    </div>
                </div>
                <div class="login-text clearfix">
                    <div class="left">
                        确认密码
                    </div>
                    <div class="right">
                        <input type="password" name="passwords" placeholder="再次输入新密码"/>
                    </div>
                </div>
                <p class="error" th:text="${error}"></p>
            </form>
        </div>
        <div class="bootom-btn">
            <!--<a href="javascript:void(0)" class="submit" style="display: block;">下一步</a>-->
            <button type="button" class="submit" id="submit-btn" style="display: block;">下一步</button>
        </div>
    </div>
</div>

</body>

<div th:replace="m/foot :: footer('baidu.hide')"></div>

<script>
    $(function () {
        $('input[name="password"]').focus();

        $('#submit-btn').click(function () {
            var password = $('input[name="password"]').val();
            var passwords = $('input[name="passwords"]').val();

            if (!Pattern.PWD.test(password)) {
                $('.login-input .error').text('密码格式错误');
                return false;
            }

            if (password != passwords) {
                $('.login-input .error').text('再次密码输入不一致');
                return false;
            }

            $('.login-input .error').text('');

            window.modifyForm.submit();

        })

    })
</script>

</html>
